<template>
	<vue3-video-play v-bind="options" :src="props.url" />
</template>

<script lang="ts" setup>
import { computed, reactive } from "vue";

import { useWindow } from "@/utils/useWindow";

const { width } = useWindow();
const props = defineProps<{
	url: string;
	title: string;
	autosize: boolean;
}>();

const sizeOption = computed(() => {
	if (!props.autosize) {
		return {};
	}
	if (width.value > 800) {
		return {
			width: `${0.6 * width.value}px`,
			height: `${0.45 * width.value}px`,
		};
	} else {
		return {
			width: `${0.8 * width.value}px`,
			height: `${0.6 * width.value}px`,
		};
	}
});

const options = computed(() => ({
	...sizeOption.value,
	color: "#409eff",
	title: props.title,
	muted: false,
	webFullScreen: false,
	speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"],
	autoPlay: false,
	loop: false,
	mirror: false,
	ligthOff: false,
	volume: 0.3,
	control: true,
	controlBtns: [
		"audioTrack",
		"quality",
		"speedRate",
		"volume",
		"setting",
		"pip",
		"pageFullScreen",
		"fullScreen",
	],
}));
</script>
